<template>
  <div class="order-list-page">
    <el-card class="filter-card">
      <el-form :inline="true" :model="filterForm" class="demo-form-inline">
        <el-form-item label="订单状态">
          <el-select v-model="filterForm.status" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option label="待支付" value="0"></el-option>
            <el-option label="已支付" value="1"></el-option>
            <el-option label="已发货" value="2"></el-option>
            <el-option label="已完成" value="3"></el-option>
            <el-option label="已取消" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-table :data="orderList" stripe border v-loading="loading">
      <el-table-column prop="orderId" label="订单编号" width="200"></el-table-column>
      <el-table-column prop="merchantName" label="商家名称"></el-table-column>
      <el-table-column label="商品信息">
        <template slot-scope="scope">
          <div v-for="(product, index) in scope.row.productVo" :key="index" class="product-item">
            <el-image v-if="product.imageUrl" :src="product.imageUrl" :preview-src-list="[]" class="product-image"></el-image>
            <div v-else class="product-image-placeholder">
              <i class="el-icon-picture-outline"></i>
            </div>
            <div class="product-info">
              <div class="product-name">{{ product.name }}</div>
              <div class="product-sku">SKU: {{ product.sku }}</div>
              <div class="product-price">¥{{ product.price }} × {{ product.quantity }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="收货人信息">
        <template slot-scope="scope">
          <div>{{ scope.row.shippingAddress.name }} {{ scope.row.shippingAddress.phonenumber }}</div>
          <div>{{ scope.row.shippingAddress.levelOneName }}{{ scope.row.shippingAddress.levelTwoName }}{{ scope.row.shippingAddress.levelThreeName }}{{ scope.row.shippingAddress.levelFourName }}{{ scope.row.shippingAddress.address }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="totalPrice" label="总价">
        <template slot-scope="scope">
          ¥{{ scope.row.totalPrice }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="订单状态">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createdAt" label="下单时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="viewOrder(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pagination.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pagination.total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filterForm: {
        status: '',
        dateRange: []
      },
      orderList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      loading: false
    };
  },
  created() {
    this.fetchOrderList();
  },
  methods: {
    async fetchOrderList() {
      this.loading = true;
      try {
        // 模拟API请求
        const response = {
          code: 200,
          data: {
            list: [
              {
                createdAt: "2025-06-12T10:32:26",
                merchantName: "手机专卖店",
                orderId: "066584136207b92447de75168eca87e7",
                productVo: [
                  {
                    id: 10,
                    name: "机械键盘",
                    sku: "KEYBOARD-010",
                    price: 799,
                    quantity: 2,
                    imageUrl: "https://picsum.photos/80/80?random=1"
                  },
                  {
                    id: 11,
                    name: "智能手机",
                    sku: "PHONE-001",
                    price: 5999,
                    quantity: 6,
                    imageUrl: "https://picsum.photos/80/80?random=2"
                  },
                  {
                    id: 12,
                    name: "智能手表",
                    sku: "WATCH-001",
                    price: 1299,
                    quantity: 7,
                    imageUrl: "https://picsum.photos/80/80?random=3"
                  },
                  {
                    id: 13,
                    name: "笔记本电脑",
                    sku: "LAPTOP-001",
                    price: 7999,
                    quantity: 1,
                    imageUrl: "https://picsum.photos/80/80?random=4"
                  },
                  {
                    id: 14,
                    name: "无线耳机",
                    sku: "EARPHONE-001",
                    price: 799,
                    quantity: 1,
                    imageUrl: "https://picsum.photos/80/80?random=5"
                  },
                  {
                    id: 15,
                    name: "平板电脑",
                    sku: "TABLET-001",
                    price: 3499,
                    quantity: 7,
                    imageUrl: "https://picsum.photos/80/80?random=6"
                  }
                ],
                shippingAddress: {
                  id: 1,
                  userId: 100,
                  levelOneName: "河北省",
                  levelTwoName: "石家庄市",
                  levelThreeName: "行唐县",
                  levelFourName: "龙州镇",
                  address: "玉兴街90号",
                  name: "张三",
                  phonenumber: "15121850906"
                },
                shippingFee: 0,
                status: 1,
                totalNumber: 24,
                totalPrice: 79976
              },
              {
                createdAt: "2025-06-12T10:09:58",
                merchantName: "手机专卖店",
                orderId: "25ba25d07d3b2a71233e3f180e757c53",
                productVo: [
                  {
                    id: 10,
                    name: "机械键盘",
                    sku: "KEYBOARD-010",
                    price: 799,
                    quantity: 2,
                    imageUrl: "https://picsum.photos/80/80?random=1"
                  },
                  {
                    id: 11,
                    name: "智能手机",
                    sku: "PHONE-001",
                    price: 5999,
                    quantity: 6,
                    imageUrl: "https://picsum.photos/80/80?random=2"
                  },
                  {
                    id: 12,
                    name: "智能手表",
                    sku: "WATCH-001",
                    price: 1299,
                    quantity: 7,
                    imageUrl: "https://picsum.photos/80/80?random=3"
                  },
                  {
                    id: 13,
                    name: "笔记本电脑",
                    sku: "LAPTOP-001",
                    price: 7999,
                    quantity: 1,
                    imageUrl: "https://picsum.photos/80/80?random=4"
                  },
                  {
                    id: 14,
                    name: "无线耳机",
                    sku: "EARPHONE-001",
                    price: 799,
                    quantity: 1,
                    imageUrl: "https://picsum.photos/80/80?random=5"
                  },
                  {
                    id: 15,
                    name: "平板电脑",
                    sku: "TABLET-001",
                    price: 3499,
                    quantity: 7,
                    imageUrl: "https://picsum.photos/80/80?random=6"
                  }
                ],
                shippingAddress: {
                  id: 5,
                  userId: 100,
                  levelOneName: "北京市",
                  levelTwoName: "市辖区",
                  levelThreeName: "石景山区",
                  levelFourName: "苹果园街道",
                  address: "苹果园区2号楼",
                  name: "梁建尧",
                  phonenumber: "13259691335"
                },
                shippingFee: 0,
                status: 2,
                totalNumber: 24,
                totalPrice: 79976
              }
            ],
            total: 2
          }
        };

        // 处理时间格式
        this.orderList = response.data.list.map(order => ({
          ...order,
          createdAt: this.formatDateTime(order.createdAt),
          // 确保shippingAddress存在
          shippingAddress: order.shippingAddress || {}
        }));

        this.pagination.total = response.data.total;
      } catch (error) {
        this.$message.error('获取订单列表失败');
        console.error(error);
      } finally {
        this.loading = false;
      }
    },

    formatDateTime(timeStr) {
      if (!timeStr) return '';
      const date = new Date(timeStr);
      return date.toLocaleString();
    },

    getStatusText(status) {
      const statusMap = {
        0: '待支付',
        1: '已支付',
        2: '已发货',
        3: '已完成',
        4: '已取消'
      };
      return statusMap[status] || '未知状态';
    },

    getStatusType(status) {
      const typeMap = {
        0: 'warning',
        1: 'primary',
        2: 'info',
        3: 'success',
        4: 'danger'
      };
      return typeMap[status] || 'default';
    },

    search() {
      // 重置页码为1
      this.pagination.currentPage = 1;
      this.fetchOrderList();
    },

    reset() {
      this.filterForm = {
        status: '',
        dateRange: []
      };
      this.pagination.currentPage = 1;
      this.fetchOrderList();
    },

    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.fetchOrderList();
    },

    handleCurrentChange(page) {
      this.pagination.currentPage = page;
      this.fetchOrderList();
    },

    viewOrder(order) {
      // 查看订单详情逻辑
      console.log('查看订单详情:', order);
      this.$message.info(`查看订单: ${order.orderId}`);
    }
  }
}
</script>

<style scoped>
.order-list-page {
  padding: 20px;
}

.filter-card {
  margin-bottom: 20px;
}

.product-item {
  display: flex;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.product-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.product-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  margin-right: 10px;
}

.product-image-placeholder {
  width: 60px;
  height: 60px;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
}

.product-info {
  flex: 1;
}

.product-name {
  font-weight: 500;
  margin-bottom: 4px;
}

.product-sku {
  font-size: 12px;
  color: #909399;
  margin-bottom: 4px;
}

.product-price {
  font-weight: 500;
  color: #f56c6c;
}
</style>
